<template>
	<view>
		<kt-nav-bar 
		:is-has-back="true"
		title="组件"></kt-nav-bar>
		<kt-box>
			<kt-markdown
			:markdown="'> 一行文字显示'"
			></kt-markdown>
			<kt-button>测试</kt-button>
			<view style="height: 10px;"></view>
			<kt-button @click="toLoading()" ref="ktButtonLoading">测试</kt-button>
			<view style="height: 10px;"></view>
			<kt-button @click="toErr()" ref="ktButtonErr">启用报错状态</kt-button>
		</kt-box>
		
		<kt-box>
			<kt-markdown
			:markdown="'> 一行文字显示'"
			></kt-markdown>

			<kt-one-line-text
			width="100rpx"
			:text="'测试'"
			></kt-one-line-text>
			<kt-one-line-text
			width="100rpx"
			:text="'测试00000'"
			></kt-one-line-text>
		</kt-box>
		
		<kt-box>
			<kt-markdown
			:markdown="'> 全屏加载状态'"
			></kt-markdown>
			<kt-button @click="openLoading()">开始</kt-button>
			<kt-loading ref="ktLoading"></kt-loading>
		</kt-box>

		<kt-box>
			<kt-markdown
			:markdown="'> MARKDOWN语法'"
			></kt-markdown>

			<kt-markdown
			:markdown="'## MARKDOWN语法\n``` console.log(\'123\');```'"
			></kt-markdown>

		</kt-box>

		<kt-box>
			<kt-avatar
			border="none"
			:src="$kt.file.byPath('image/logo.png')"
			:online="true"
			></kt-avatar>
		</kt-box>

		<kt-box>
			<kt-character-card
			:character="character"
			></kt-character-card>
		</kt-box>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			character:{
				fileIdOfAvatar: '647513348431877',
				nickname: '柏拉图',
				age:100,
				labels: [{text:'标签'},{text:'标签'},{text:'标签'}],
				gender:"male",
				introduction:"我是柏拉图，依啊依啊哟~"
			}
		}
	},
	onLoad() {
		this.$refs.ktButton.loading();
	},
	methods: {
		toLoading() {
			this.$refs.ktButtonLoading.loading();
		},
		toErr() {
			this.$refs.ktButtonErr.error("登录错误水水水水水水水水水水水水水急急急急急急水");
		},
		openLoading(){
			this.$refs.ktLoading.open();
			setTimeout(() => {
				this.$refs.ktLoading.close();
			}, 1000);
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
